/**
 * 功能描述: 基础单选按钮组样式
 * @author 赵常畅
 * @date 2022/9/21 19:34
 * @version 1.0
 */

@import "../../style/index";
@import "../RadioButton/radioButtonConstant";

// 基础radio按钮组
@mixin radio-button-group--layout {
  // 布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
  line-height: 1.5715;
  // radio Button最外层容器
  @include b(radio-button-wrapper) {
    // 非第一个子元素 伪类 内部前面
    &:not(:first-child)::before {
      position: absolute;
      top: -1px;
      left: -1px;
      display: block;
      box-sizing: content-box;
      width: 1px;
      height: 100%;
      padding: 1px 0;
    }
  }
}
@include b(radio-button-group){
  // 样式
  color: $--radio-button-group-font-color;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  font-size: 0;
  // 引入布局
  @include radio-button-group--layout;
  // radio Button 最外层容器
  @include b(radio-button-wrapper) {
    border-radius: 0;
    // 非第一个子元素
    &:not(:first-child) {
      border-left: 0;
    }
    // 第一个子元素
    &:first-child {
      border-radius: $--radio-button-group-border-radius 0 0 $--radio-button-group-border-radius;
      //最后一个子元素
      &:last-child {
        border-radius: $--radio-button-group-border-radius;
      }
      // 非第一个子元素 伪类 内部前面
      &:not(:first-child)::before {
        background-color: $--radio-button-group-background-color;
        transition: $--radio-button-group-transition;
        content: '';
      }
    }
    // 最后一个子元素
    &:last-child {
      border-radius: 0 $--radio-button-group-border-radius $--radio-button-group-border-radius 0;
    }
  }
}

// 选中的按钮的第一个
@include b(radio-button-wrapper-checked) {
  //非禁用 第一个子元素
  &:not(.#{$namespace}-radio-button-wrapper-disabled):first-child {
    border-color: $--radio-button-group-border-color;
  }
}

// 禁用的按钮的第一个子元素
@include b(radio-button-wrapper-disabled) {
  :first-child{
    color: $--radio-button-group-disabled-font-color;
    background-color: $--radio-button-group-disabled-background-color;
    border-color: $--radio-button-group-disabled-border-color;
  }
}
// 禁用的按钮 第一个子元素
@include b(radio-button-wrapper-disabled) {
  &:first-child {
    border-left-color: $--radio-button-group-disabled-border-color;
  }
}

// 选中的按钮 非禁用 按钮最外层容器 第一个子元素
.#{$namespace}-radio-button-wrapper-checked:not([class*=' #{$namespace}-radio-button-wrapper-disabled']) {
  &.#{$namespace}-radio-button-wrapper:first-child {
    border-right-color: $--radio-button-group-checked-border-color;
  }
}